<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址管理页面</title>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/cookie_utils.js" ></script>
	<script type="text/javascript" src="static/js/axios.min.js" ></script>
	<script type="text/javascript" src="static/js/vue.js" ></script>
	<script src="static/js/index.js"></script>
	<script type="text/javascript" src="static/js/base.js" ></script>
</head>

<body>
    <div id="app">
        <el-tabs type="border-card" label-width="80px" style="width: 800px;" >
            <template>
                <el-table type=index :data="list" border style="width: 100%">
                    <el-table-column  fixed prop="receiverName" label="收货人" width="70" align="center">
                    </el-table-column>
                    <el-table-column prop="receiverMobile" label="联系方式" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="provinceName" label="省份" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="cityName" label="城市" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="areaName" label="区县" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="详细地址" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="170" align="center">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="160" align="center">
                        <template slot-scope="scope" align="center">
                            <el-button size="mini" type="warning" round @click="handleEdit(scope.$index, scope.row)">
                                编辑</el-button>
                            <el-button size="mini" type="danger" round
                                @click="handleDelete(scope.$index, scope.row,list)">
                                删除
                            </el-button>
                        </template>
                </el-table>
            </template>
            <br>
			<div style="text-align:center">
            <el-button style="text-align:center" type="primary" @click="toAddress" round style=>添加新地址</el-button>
			</div>
        </el-tabs>
    </div>
	
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],
                token:"",
            },
            created() {
				this.token = getCookieValue("token");
				var userId = getCookieValue("userId");
				console.log("userId"+userId)
                //查询全部地址信息
                var url1 = baseUrl+"useraddr/list";

				axios({
						url:url1,
						method:"get",
						params:{
							userId:userId
						},
						headers:{
							token:this.token
						}
					}).then((res)=>{
						if(res.data.code == 401){
							//跳转登录
						}else if(res.data.code == 200){
							this.list = res.data.data;
						}
					});
            },
            methods: {
                //修改操作：跳转到修改页面 url中带aid值
                //index——当前索引值 row——当前所在行对象
                handleEdit(index, row) {
                    console.log(index, row);
                    var aid = row.addrId;
                    window.location.href = "user-addaddress.html?" + aid;
                },
                //删除操作
                handleDelete(index, row, list) {
                    var aid = row.addrId;
                    var url2 = baseUrl + "useraddr/" + aid + "/delete";
                    console.log(this.token);
                    axios({
                        method: "delete",
                        url: url2,
						headers:{
					    token:this.token
							},
                    }).then((res) => {
                        if (res.data.code == 200) {
                            alert("删除成功")
                            list.splice(index, 1);
                        } else {
                            alert("删除失败")
                        }
                    });
                },
                //跳转到address页面
                toAddress() {
                    window.location.href = "user-addaddress.html";
                },
            }
        });
    </script>
</body>
</html>